# Component: Search

Interactive search result listing with conditional media layouts

Content Block

### BEM Anatomy

| Type      | Class Name               | Description                                                                                      |
| --------- | ------------------------ | ------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-search`             | The master search container. Orchestrates titles, results, and utility states.                   |
| Element   | `__row`                  | The internal grid row. Manages column gutters and wrapping for the result cards.                 |
| Element   | `__col`                  | The responsive grid column wrapping each search result.                                          |
| Element   | `__card`                 | The result unit. Forced to `height: 100%` for uniform grid display.                              |
| Element   | `__content-row`          | A flex/grid row inside the card used to position the image and text side-by-side or stacked.     |
| Element   | `__content-col`          | Layout columns within a card. Modifiers `--content` and `--image` manage ratios.                 |
| Modifier  | `__content-col--image`   | Specifically handles the container for the result thumbnail, managing aspect ratio and cropping. |
| Modifier  | `__content-col--content` | Specifically handles the container for the result title and description.                         |
| Element   | `__image`                | The thumbnail image for the result. Often uses `object-fit: cover`.                              |
| Element   | `__content`              | The text container within the card (Title, Description, Link). Uses `flex-direction: column`.    |
| Element   | `__title`                | The heading for the search result. Linked directly to the content source.                        |
| Element   | `__description`          | The snippet or excerpt from the search result. Usually limited to 2-3 lines via line-clamp.      |
| Element   | `__link`                 | The display URL/breadcrumb. Uses `margin-top: auto` to stick to card bottoms.                    |
| Element   | `__pagination`           | Centered container for the "Next" or "Load More" action button.                                  |
| Element   | `__button`               | Base class for pagination triggers.                                                              |
| Modifier  | `__button--load-more`    | Specific styling for the primary "Fetch more results" action.                                    |
| Element   | `__loading`              | A dedicated state container for skeleton loaders or spinner icons.                               |
| Element   | `__warning`              | Used for "No results found" or "Query too short" feedback messages.                              |
| Element   | `__info`                 | Used for general search metadata (e.g., "Showing 1-10 of 450 results").                          |

### Conditional Card Rendering

The search card dynamically adjusts its internal grid based on the presence of a thumbnail. If a thumbnail exists, the layout splits into `8/4` columns (desktop). If no thumbnail is provided, the content column expands to `12` columns.

##### Generated HTML (With Thumbnail)

```html
<div class="as-search">
    <div class="as-search__row row">
        <div class="as-search__col col-lg-9">
            <div class="as-search__card card">
                <div class="as-search__content-row row">
                    <div class="as-search__content-col--content col-md-8">
                        <div class="as-search__content card-body">
                            <h5>Result Title</h5>
                            <div class="as-search__link">https://example.com/item</div>
                        </div>
                    </div>
                    <div class="as-search__content-col--image col-md-4">
                        <img src="..." class="as-search__image" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-search {
  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover; // Fills md-4 column height
  }

  &__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    .as-search__link {
       // Pushes URL to bottom of card
       margin-top: auto; 
       color: var(--bs-primary);
    }
  }
}
```
